<template>
  <section>
    <div class="bii-box-section">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="tab-nav">
            <div @click="handleType('date')" class="item" :class="{ 'active': (listQuery.type == 'date') }">今日数据</div>
            <div @click="handleType('month')" class="item" :class="{ 'active': (listQuery.type == 'month') }">本月数据</div>
            <div @click="handleType('total')" class="item" :class="{ 'active': (listQuery.type == 'total') }">累计数据</div>
          </div>

          <el-row :gutter="20" style="margin-top:20px;">
            <!-- <el-col :span="6">
              <el-card class="box-card box">
                提交审核商品
                <p class="value">
                  {{ form.submitProductNum }}
                </p>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card box">
                审核通过商品
                <p class="value">
                  {{ form.auditProductNum }}
                </p>
              </el-card>
            </el-col> -->
            <el-col :span="6">
              <el-card class="box-card box">
                待结算金额
                <p class="value">
                  <span class="currency">￥</span>{{ form.waitSettleMoney }}
                </p>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card box">
                已结算金额
                <p class="value">
                  <span class="currency">￥</span>{{ form.settledMoney }}
                </p>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top:20px;">
            <el-col :span="12">
              <el-card class="box-card box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <p class="value">
                      {{ form.orderProductNum }}
                    </p>
                    成交商品数
                  </el-col>
                  <el-col :span="8">
                    <p class="value">
                      <span class="currency">￥</span>{{ form.productIncome }}
                    </p>
                    商品收人
                  </el-col>
                  <el-col :span="8">
                    <p class="value">
                      {{ form.orderNum }}
                    </p>
                    成交单数
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <p class="value3">
                      {{ form.refundProductNum }}
                    </p>
                    退款商品数
                  </el-col>
                  <el-col :span="8">
                    <p class="value3">
                      <span class="currency">￥</span>{{ form.refundMoney }}
                    </p>
                    退款金额
                  </el-col>
                  <el-col :span="8">
                    <p class="value3">
                      {{ form.refundOrderNum }}
                    </p>
                    退款单数
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
          <div class="title">收益统计图</div>
          <el-card class="box-card">
            <v-chart autoresize :options="saleReport" />
          </el-card>
        </el-col>
        <!-- <el-col :span="6">
          <div class="title">
            商品排行榜
            <div class="more" @click="viewProduct()">更多>></div>
          </div>
          <el-card class="box-card">
            <div class="goods-list base-section">
              <div class="goods-head">
                <div class="row-t row-l">
                  排名
                </div>
                <div class="row-t row-c">
                  <span>商品</span>
                </div>
                <div class="row-t row-r">
                  销量
                </div>
              </div>
              <template v-for="(item, idx) in saleList">
                <div class="row" :key="item.id" @click="toProductDetail(item)">
                  <div class="row-l">
                    {{ idx + 1 }}
                  </div>
                  <div class="row-c">
                    <div class="pic">
                      <img :src="item.listImgUrl" />
                    </div>
                    <div class="title ellipsis2">
                      {{ item.title }}
                    </div>
                  </div>
                  <div class="row-r">
                    {{ item.saleCount }}
                  </div>
                </div>
              </template>
</div>
</el-card>
</el-col> -->
      </el-row>
    </div>
  </section>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import {
  agency_summary,
  admin_dashboard
} from '../../api/agency';
import {
  product_list,
  product_sale_count
} from '../../api/product';
export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      saleReport: {
        color: ['#1990FF', '#3DCCCC'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['本月', '上个月']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '本月',
            type: 'line',
            stack: '销量',
            data: []
          },
          {
            name: '上个月',
            type: 'line',
            stack: '销量',
            data: []
          },
        ]
      },
      yearList: [],
      listQuery: {
        type: "date",
      },
      list: [],
      total: 0,
      form: {
        auditProductNum: 0,
        submitProductNum: 0,
        waitSettleMoney: 0,
        settledMoney: 0,
        orderProductNum: 0,
        productIncome: 0,
        orderNum: 0,
        refundProductNum: 0,
        refundMoney: 0,
        refundOrderNum: 0,
      },
      saleList: []
    }
  },
  mounted() {
  },
  created() {
    this.getData();
    // this.getSaleList();
    // this.getProductSaleCount();
  },
  methods: {
    handleType(type) {
      this.listQuery.type = type;
      this.getData();
    },
    exportExcel() {

    },
    viewProduct() {
      this.$router.push("/goods_list")
    },
    getData() {
      let datas = {}
      admin_dashboard(this.listQuery).then((res) => {
        datas = res;
        // console.log(res.data.income, '##################', this.saleReport);
        this.saleReport.series[0].data = res.data.income.valueMonth

        this.saleReport.series[1].data = res.data.income.valueOfLastMonth
        // series: [
        //   {
        //     name: '本月',
        //     type: 'line',
        //     stack: '销量',
        //     data: []
        //   },
        //   {
        //     name: '上个月',
        //     type: 'line',
        //     stack: '销量',
        //     data: []
        //   },
        // ]


      }).catch((err) => {

      })

      // saleReport
      agency_summary(this.listQuery).then((res) => {
        this.form = res.data;
      }).catch((err) => {

      })
    },
    toProductDetail(row) {
      let { href } = this.$router.resolve({ path: '/goods_detail?id=' + row.id });
      window.open(href, '_blank');

    },
    getSaleList() {
      product_list({
        pageNum: 1,
        pageSize: 10,
        getSaleCount: 1,
        orderCol: "sale_count",
        orderAsc: "descending"
      }).then((res) => {
        let list = res.data.list;
        this.saleList = [];
        if (list && list.length > 0) {
          list.forEach((item) => {
            if (item.saleCount > 0) {
              this.saleList.push(item);
            }
          })
        }
      }).catch((err) => {

      })
    },
    getProductSaleCount() {
      product_sale_count().then((res) => {
        this.saleReport.xAxis.data = res.data.day;
        this.saleReport.series[0].data = res.data.valueMonth;
        this.saleReport.series[1].data = res.data.valueOfLastMonth;
      }).catch((err) => {

      })
    }
  }
};
</script>
<style lang="scss" scoped>
.bii-box-section {
  .echarts {
    width: 100%;
  }

  .goods-list {
    padding: 0px 10px 10px;

    .row-t {
      line-height: 30px;
      color: rgb(153, 153, 153);
      font-size: 14px;
      height: auto;
      -webkit-box-pack: center;
      justify-content: center;
    }

    .row-l {
      width: 48px;
      margin-right: 6px;
      font-size: 30px;
      text-align: center;
    }

    .row-c {
      -webkit-box-flex: 1;
      flex: 1 1 0%;
      height: auto;
      display: flex;
      -webkit-box-align: center;
      align-items: center;

      .title {
        -webkit-box-flex: 1;
        flex: 1 1 0%;
        font-size: 14px;
        line-height: 17px;
        height: 34px;
      }

      .pic {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        margin-right: 17px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .row-r {
      line-height: 30px;
      color: rgb(153, 153, 153);
      font-size: 14px;
      height: auto;
    }

    .row {
      display: flex;
      height: 100px;
      margin-bottom: 9px;
      border-radius: 4px;
      -webkit-box-align: center;
      align-items: center;
      cursor: pointer;
    }

    .goods-head {
      display: flex;
      padding: 10px 0px 4px;

      .row-l {
        font-size: 14px;
      }
    }
  }

  .title {
    line-height: 60px;
    height: 60px;
    font-size: 16px;
    font-weight: 700;
    position: relative;

    .more {
      padding-right: 14px;
      font-size: 14px;
      cursor: pointer;
      display: inline-block;
      float: right;
    }
  }

  // padding: 80px;
  // height: 100%;
  // background: #fff;
  // -webkit-box-sizing: border-box;
  // box-sizing: border-box;
  // overflow: auto;

  .box {
    text-align: center;
    font-size: 14px;
    color: rgb(153, 153, 153);
    font-weight: 700;

    .value {
      font-size: 28px;
      line-height: 33px;
      color: #F4222D;
      height: 33px;

      .currency {
        font-size: 14px;
      }
    }

    .value3 {
      font-size: 28px;
      line-height: 33px;
      color: #000000;
      height: 33px;

      .currency {
        font-size: 14px;
      }
    }
  }
}
</style>
